<template>
  <div class="good" @click="$emit('click')">
    <div class="new">
      <p v-if="good.isNew === 1">新品</p>
      <p v-for="i in good.pmList" :key="i.pmTag">{{ i.pmTag }}</p>
    </div>
    <div class="img">
      <img :src="good.imgUrl" />
    </div>
    <h2>{{ good.goodsName }}</h2>
    <h2 class="price">{{ '¥' + parseFloat(good.price).toFixed(2) }}</h2>
  </div>
</template>

<script>
export default {
  props: ['good'],
  mounted() {
    // console.log(this.good)
  }
}
</script>

<style lang="scss" scoped>
.good {
  display: flex;
  flex-direction: column;
  position: relative;
  flex: 0 0 calc(25% - 10px);
  box-sizing: border-box;
  height: 600px;
  padding: 0 20px;
  background-color: #fff;
}
.good .new {
  height: 100px;
  // border: 1px solid #000;
}
.good .new p {
  text-align: center;
  width: 70px;
  color: #fff;
  padding: 1px;
  background-color: red;
}
.good .img {
  width: 60%;
  margin: auto;
  // border: 1px solid #000;
}
.price {
  color: red;
  font-size: 28px;
}
</style>
